import React, { useState ,useEffect } from 'react';
import http from '../../axios/http'
import './Recommend.css'

function Recommend(){

    const [list, setList] = useState([]);
    const [id, setId] = useState(null);

    useEffect(()=>{
        http.get({
            url:'/netease/song/newest',
            success: res=>{
                setList(res.data)
            }
        })
    },[])

    return (
        <div className="newMusic">
            <div className="nav">最新音乐</div>
            <ul className="netease-Recommend">
                {
                    list.map((item)=>{
                        return (
                            <li key={item.id} onClick={()=>{setId(item.id)}}>
                                <img src={item.picUrl} alt={item.name} />
                                <p>{item.name}</p>
                            </li>
                        )
                    })
                }
            </ul>
            <audio src={`https://v1.itooi.cn/netease/url?id=${id}&quality=128`} controls="controls" autoPlay ></audio>
        </div>
    )
}
export default Recommend;